<template>
  <div>
    <div>
      <!-- 头部组件 -->
      <CommonTop></CommonTop>
      <CommonSearch></CommonSearch>
      <CommonNav></CommonNav>
    </div>
    <!-- 轮播图组件 -->
    <div>
      <Banner />
    </div>

    <div>
      <Content>
        <template v-slot:content>
          <div class="content-slot flex-r flex-jc-sb flex-ac-fs flex-col">
            <div v-for="(item, index) in books" :key="index">
              <CardBooks
                :id="item.id"
                :image="item.image"
                :name="item.name" 
                :auth="item.auth"
                :price="item.price"
                :priceold="item.priceold"
                :active="item.active" 
              />
            </div>
          </div>
          <div class="w-100 flex-r flex-jc-c flex-ai-c m-t-20">
            <Pagination :total="this.books.length" />
          </div>
        </template>
      </Content>
    </div>
    <!-- 底部组件 -->
    <div class="footer-box f-12 bg-primary">
      <Footer />
    </div>
  </div>
</template>

<script>
import booksjson from "@/assets/json/books.json";
import { mapState } from "vuex";
import { ElMessage } from "element-plus";

export default {
  name: "Home",
  data() {
    return {
      books: booksjson
    };
  },
  computed: {
    ...mapState({
      shopbooks: state => state.shopcar.shopbooks
    })
  },
  methods: {
    // searchEvent(data) {
    //   this.books = booksjson;
    //   let search = this.books.filter(n => n.name == data);
    //   if (!search[0]) {
    //     ElMessage({
    //       message: "未找到相关书籍！",
    //       type: "warning",
    //       offset: 80
    //     });
    //   } else {
    //     this.books = search;
    //   }
    // }
  },
  created() {
    if (this.shopbooks.length > 0 && this.books.length > 0) {
      const newdata = this.books.filter(n =>
        this.shopbooks.every(val => val.id != n.id)
      );
      this.books = [...this.shopbooks, ...newdata];
    }
  }
};
</script>

<style lang="scss">
body {
  background-color: #cacaca55;
}

.footer-box {
  height: 40px;
  line-height: 40px;
  color: #ffffff;
}

.content-slot {
  width: 100%;
  min-height: 330px;
  gap: 30px;
}
</style>
